<template>
	<view>
		<dsl-navbar title="出行人" bgTopImg="white" isBack=""></dsl-navbar>
		<view style="padding-top: 10px;">
			<view class="beijing" :style="{height: windowHeight}">
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">地区</view>
					<view class="rowic">
						<view class="mr20 fs28 c333">
							<picker @change="PickerChange" :value="addressIndex" :range="addressList">
								<view class="picker">
									{{addressIndex>-1?addressList[addressIndex]:'请选择'}}
								</view>
							</picker>

						</view>
						<image style="width: 20rpx;height: 20rpx;" src="/static/img/icon_qiehuandizhi.png" mode="">
						</image>
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">姓名</view>
					<view class="rowic">
						<input type="text" placeholder="请填写真实姓名" v-model="realName" />
						<view class="fs20 cf55">*(必填)</view>
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">邮箱</view>
					<view class="rowic">
						<input type="text" placeholder="请填写邮箱" v-model="email" />
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">身份证</view>
					<view class="rowic">
						<input type="text" placeholder="请填写身份证号" v-model="idNumber" />
						<view class="fs20 cf55">*(必填)</view>
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">手机号</view>
					<view class="rowic">
						<input type="text" placeholder="请填写手机号" v-model="phone" />
						<view class="fs20 cf55">*(必填)</view>
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">生日</view>
					<picker mode="date" :value="date" start="1900-09-01" end="2999-09-01" @change="DateChange">
						<view class="picker">
							{{date || '请选择'}}
						</view>
					</picker>
				</view>
				<view class="bg-white padding margin rowsb">
					<view v-for="(item,inedx) in ageList" @click="type = inedx">
						<text :class="{activeText:inedx == type}">
							{{item}}
						</text>
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">性别</view>
					<view class="rowic">
						<view class="align-center" @click="gender='男'">
							<text class="cuIcon-male" :class="{'text-blue':gender=='男'}"></text>
							<view class="fs28 c333 mr15 ml15">男</view>
						</view>
						<view class="align-center" @click="gender='女'">
							<text class="cuIcon-female" :class="{'text-red':gender=='女'}"></text>
							<view class="fs28 c333 mr15 ml15">女</view>
						</view>
						<view class="fs20 cf55">*(必填)</view>
					</view>
				</view>

				<view class="oneRow rowjbic">
					<view class="fs26 cccc">现居地</view>
					<view class="sheng-box rowjbic">
						<picker mode="region" @change="RegionChange" :value="region">
							<view class="picker">
								{{region[0]}}，{{region[1]}}，{{region[2]}}
							</view>
						</picker>
						<image style="width: 20rpx;height: 20rpx;" src="/static/img/icon_xiasi.png" mode=""></image>
					</view>
				</view>
				<view class="oneRow rowjbic">
					<view class="fs26 cccc">详细地址</view>
					<input type="text" placeholder="请具体到小区或者村庄" v-model="addressContent" />
				</view>
				<view class="rowjc" @click="submintAddress()" v-if="isAddress">
					<view class="baocun">保存修改</view>
				</view>
				<view class="rowjc" @click="updateTravelMember()" v-if="!isAddress">
					<view class="baocun">保存修改</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post_addTravelMember,
		updateTravelMember
	} from '../../common/path.js'
	export default {
		data() {
			return {
				windowHeight: 0, //可用窗口的高度
				addressIndex: -1,
				addressList: ['中国大陆', '港澳台', '海外'],
				realName: '', //姓名
				email: '', //邮箱
				idNumber: '', //身份证
				date: '', //日期选择
				gender: '男', //性别
				region: ['北京市', '北京市', '北京市'], //地址选择
				addressContent: '', //详情地址
				addressId: '', //地址id
				isAddress: true, //判断是否是添加
				phone: '', //手机号
				type: 0, //0-成人1-中童2-儿童
				ageList: [
					'成人',
					'中童',
					'儿童'
				]
			}
		},
		onReady() {
			this.getWindowHeight()
		},
		onLoad(option) {
			if (option.data) {
				let obj = JSON.parse(option.data)
				console.log('[地址]', obj);
				this.realName = obj.realName
				this.gender = obj.gender
				this.email = obj.email
				this.addressContent = obj.address
				this.idNumber = obj.idNumber
				this.date = obj.birthday
				// this.addressList[obj.region]
				this.addressIndex = obj.region
				this.region[0] = obj.province
				this.region[1] = obj.city
				this.region[2] = obj.area
				this.addressId = obj.id
				this.isAddress = false
				this.phone = obj.contactNumber,
				this.type = obj.type
			}
		},
		methods: {
			//地址选择
			RegionChange(e) {
				this.region = e.detail.value
			},
			getWindowHeight() {
				this.windowHeight = uni.getSystemInfoSync().windowHeight - 10 + 'px'
			},
			//日期选择
			DateChange(e) {
				this.date = e.detail.value
			},
			//选择地区
			PickerChange(e) {
				this.addressIndex = e.detail.value
			},

			//更新出行人信息
			updateTravelMember() {
				if (this.addressIndex == -1) {
					this.$tools.showToast('请选择地区')
					return
				}
				if (this.idNumber == '') {
					this.$tools.showToast('请填写有效身份证件')
					return
				}
				if (this.realName == '') {
					this.$tools.showToast('请填写姓名')
					return
				}
				if (this.phone == '') {
					this.$tools.showToast('请填写手机号')
					return
				}


				let userId = uni.getStorageSync('userInfo').id

				let data = {
					"userId": userId,
					"region": this.addressIndex,
					"realName": this.realName,
					"idNumber": this.idNumber,
					"contactNumber": this.phone,
					"gender": this.gender,
					"email": this.email,
					"birthday": this.date,
					"province": this.region[0],
					"city": this.region[1],
					"area": this.region[2],
					"address": this.addressContent,
					"id": this.addressId,
					"type":this.type
				}
				this.Http.POST(updateTravelMember, data)
					.then((res) => {
						if (res.code == 0) {
							this.$tools.showToast2(res.msg)
							setTimeout(r => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},


			//添加出行人
			submintAddress() {
				if (this.addressIndex == -1) {
					this.$tools.showToast('请选择地区')
					return
				}
				if (this.idNumber == '') {
					this.$tools.showToast('请填写有效身份证件')
					return
				}
				if (this.realName == '') {
					this.$tools.showToast('请填写姓名')
					return
				}
				if (this.phone == '') {
					this.$tools.showToast('请填写手机号')
					return
				}
				let userId = uni.getStorageSync('userInfo').id

				let data = {
					"userId": userId,
					"region": this.addressIndex,
					"realName": this.realName,
					"idNumber": this.idNumber,
					"contactNumber": this.phone,
					"gender": this.gender,
					"email": this.email,
					"birthday": this.date,
					"province": this.region[0],
					"city": this.region[1],
					"area": this.region[2],
					"address": this.addressContent,
					"type":this.type
				}
				this.Http.POST(post_addTravelMember, data)
					.then((res) => {
						if (res.code == 0) {
							this.$tools.showToast2(res.msg)
							setTimeout(r => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			}
		}
	}
</script>

<style>
	.beijing {
		background-color: #FFFFFF;
		padding: 10rpx 20rpx 0rpx;
		box-sizing: border-box;
	}

	.oneRow {
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	input {
		text-align: right;
		font-size: 28rpx;
		color: #333333;
	}

	.activeText {
		color: #29EAC4;
	}
	.baocun {
		width: 500rpx;
		height: 80rpx;
		border-radius: 36rpx;
		background-color: #29EAC4;
		text-align: center;
		line-height: 80rpx;
		color: rgba(255, 255, 255, 0.7);
		font-size: 32rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.sheng-box {
		height: 50rpx;
		line-height: 50rpx;
		border: 1rpx solid #CCCCCC;
		padding: 0rpx 10rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
</style>
